<template>
  <div class=''>
    <el-button style="margin-bottom: 10px;" type="primary" icon="el-icon-plus" size="small" :disabled="!category3Id"
      @click="$emit('changeStatus', 2)">添加属性</el-button>
    <el-table :data="spuList" border style="width: 100%;margin-bottom: 10px;">
      <el-table-column type="index" align="center" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="spuName" label="SPU名称">
      </el-table-column>
      <el-table-column prop="description" label="SPU描述">
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template slot-scope="{row,$index}">
          <el-button icon="el-icon-plus" type="success" size="mini" @click="addSkuHandler(row)" title="新增SKU"></el-button>
          <el-button icon="el-icon-edit" type="warning" size="mini" @click="editHandler(row)" title="修改SPU"></el-button>
          <el-button icon="el-icon-info" type="info" size="mini" style="margin-right: 10px;" title="查看SKU列表"
            @click="checkoutSkuList(row)"></el-button>
          <el-popconfirm :title="`确定要删除[${row.spuName}]吗?`" @confirm="deleteHandler(row, $index)">
            <el-button slot="reference" icon="el-icon-delete" type="danger" size="mini" title="删除SPU"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
      :page-sizes="[3, 6, 9]" :page-size="100" layout="prev,pager, next,  jumper, ->,sizes,total " :total="total">
    </el-pagination>

    <el-dialog :title="`[${currentSpuRow.spuName}]的sku列表`" :visible.sync="dialogTableVisible" top="0" width="80%">
      <el-table :data="skuList">
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="重量" prop="weight"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{ row, $index }">
            <img :src="row.skuDefaultImg" style="width: 60px;height: 60px;">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import spuApi from "@/api/spu";
export default {
  name: 'SpuList',
  data() {
    return {
      dialogTableVisible: false,
      total: 0,
      page: 1,
      limit: 3,
      spuList: [],
      skuList: [],
      currentSpuRow: {},
    }
  },
  methods: {
    // 点击查看sku列表的回调
    async checkoutSkuList(row) {
      this.dialogTableVisible = true
      console.log(row.id)
      this.currentSpuRow = row
      try {
        let result = await spuApi.getSkuListBySpuId(row.id)
        this.skuList = result.data
        console.log(result.data)
      } catch (error) {
        console.error(error)
      }
    },
    // 点击新增sku的回调
    addSkuHandler(row) {
      this.$emit('spuInfo', row)
      this.$emit('changeStatus', 3)
    },
    // 点击编辑的回调
    editHandler(row) {
      this.$emit('changeStatus', 2)
      this.$emit('spuInfo', row)
    },
    // 删除当前spu的功能函数
    async deleteSpu(id) {
      try {
        await spuApi.deleteSpu(id)
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        this.page = 1
        this.getSpuList()
      } catch (error) {
        console.error(error)
        this.$message({
          showClose: true,
          message: '删除失败，请重试',
          type: 'danger'
        });
      }
    },
    // 点击删除按钮的回调
    deleteHandler(row, index) {
      this.deleteSpu(row.id)
    },
    // 获取spu列表数据的功能函数
    async getSpuList() {
      try {
        let result = await spuApi.getSpuList(this)
        this.total = result.data.total
        this.spuList = result.data.records
      } catch (error) {
        console.error(error)
      }
    },
    // 点击每页条数据的回调
    handleSizeChange(val) {
      this.limit = val
      this.getSpuList()
    },
    // 点击翻页的回调
    handleCurrentChange(val) {
      this.page = val
      this.getSpuList()
    },
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  watch: {
    category3Id: {
      handler(nval, oval) {
        if (nval) {
          this.getSpuList()
        }
      },
      immediate: true
    }
  }
}
</script>

<style></style>